<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 操作示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        .button:hover {
            background-color: #45a049;
        }
        .element-to-remove {
            margin-top: 20px;
            padding: 10px;
            background-color: #f44336;
            color: white;
            border-radius: 5px;
        }
        .element-to-modify {
            margin-top: 20px;
            padding: 10px;
            background-color: #2196F3;
            color: white;
            border-radius: 5px;
        }
        .image-container {
            margin-top: 20px;
            text-align: center;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>DOM 操作示例</h1>
    <button id="addButton" class="button">添加元素</button>
    <button id="removeButton" class="button">删除元素</button>
    <button id="modifyButton" class="button">修改元素内容</button>

    <div class="element-to-remove">这是一个可以删除的元素</div>
    <div class="element-to-modify">这是一个可以修改内容的元素</div>

    <!-- 添加图片上传、展示和下载功能 -->
    <input type="file" id="imageUpload" accept="image/*" style="margin-top: 20px;"> <!-- 输入文件元素，接受图片类型，设置样式 -->
    <div class="image-container" id="imageContainer"></div> <!-- 图片容器，用于展示上传的图片 -->
    <a id="downloadLink" class="button" style="display: none;" download="uploaded-image.png">下载图片</a> <!-- 下载链接，初始状态为隐藏 -->

    <script>
        // 获取按钮
        let addButton = document.querySelector("#addButton");
        let removeButton = document.querySelector("#removeButton");
        let modifyButton = document.querySelector("#modifyButton");

        // 添加元素
        addButton.addEventListener("click", function () {
            let newElement = document.createElement("div");
            newElement.textContent = "新元素";
            document.body.appendChild(newElement);
        });

        // 删除元素
        removeButton.addEventListener("click", function () {
            let elementToRemove = document.querySelector(".element-to-remove");
            if (elementToRemove) {
                elementToRemove.parentNode.removeChild(elementToRemove);
            }
        });

        // 修改元素内容
        modifyButton.addEventListener("click", function () {
            let elementToModify = document.querySelector(".element-to-modify");
            if (elementToModify) {
                elementToModify.textContent = "修改后的内容";
            }
        });

        // 图片上传功能
        document.getElementById('imageUpload').addEventListener('change', function(event) { // 为图片上传元素添加事件监听器，监听文件选择变化
            const file = event.target.files[0]; // 获取上传的文件
            if (file) { // 如果文件存在
                const reader = new FileReader(); // 创建文件读取器对象
                reader.onload = function(e) { // 当文件读取完成时触发
                    const img = document.createElement('img'); // 创建图片元素
                    img.src = e.target.result; // 设置图片的src属性为读取的结果
                    document.getElementById('imageContainer').innerHTML = ''; // 清空图片容器中的内容
                    document.getElementById('imageContainer').appendChild(img); // 将图片元素添加到图片容器中

                    // 设置下载链接
                    const downloadLink = document.getElementById('downloadLink'); // 获取下载链接元素
                    downloadLink.href = e.target.result; // 设置下载链接的href属性为读取的结果
                    downloadLink.style.display = 'inline-block'; // 显示下载链接
                };
                reader.readAsDataURL(file); // 以Data URL的形式读取文件
            }
        });
    </script>
</body>
</html>